<template>
	<el-dialog title="查看记录" :visible.sync="dialogVisible" width="1000px" append-to-body>
		<el-tabs v-model="activeName">
			<el-tab-pane label="扣款记录" name="deduct">
				<el-table :data="tableData" border>
					<el-table-column align="center" label="期数" width="70">
						<template slot-scope="scope">
							<span>第{{scope.row.which_period}}期</span>
						</template>
					</el-table-column>
					<el-table-column align="center" label="租期">
						<template slot-scope="scope">
							<span>{{scope.row.begin_time}}至{{scope.row.end_time}}</span>
						</template>
					</el-table-column>
					<el-table-column align="center" label="金额" prop="rent"></el-table-column>
					<el-table-column align="center" label="支付状态" prop="lease_status">
					</el-table-column>
					<el-table-column align="center" label="扣款时间" prop="create_time"></el-table-column>
					<el-table-column align="center" label="支付流水号" prop="trade_no"></el-table-column>
					<el-table-column align="center" label="扣款状态">
						<template slot-scope="scope">
							<span>扣款{{scope.row.status}}</span>
						</template>
					</el-table-column>
					<el-table-column align="center" label="原因" width="180" prop="failReason"></el-table-column>
					<el-table-column align="center" label="操作内容" width="120" prop="pay_type"></el-table-column>
					<el-table-column align="center" label="操作人" prop="username"></el-table-column>
				</el-table>
				<custom-page ref="customPage" :total="total" @getList="getDeduct"></custom-page>
			</el-tab-pane>
		</el-tabs>
		<div slot="footer" class="dialog-footer">
			<el-button type="primary" @click="dialogVisible=false">关闭</el-button>
		</div>
	</el-dialog>
</template>

<script>
	import {
		leaseWithholdLog
	} from "@/api/finance";
	import customPage from "@/components/customPage";
	export default {
		components: {
			customPage
		},
		props: ['orderNo', 'leaseId'],
		data() {
			return {
				activeName: 'deduct',
				dialogVisible: false,
				tableData: [],
				total: 0
			}
		},
		methods: {
			getDeduct() {
				const {
					page,
					pageSize
				} = this.$refs.customPage;
				leaseWithholdLog({
					orderNo: this.orderNo,
					leaseId: this.leaseId,
					page,
					pageSize
				}).then(res => {
					this.tableData = res.data || [];
					this.total = res.total || 0;
				})
			}
		},
		watch: {
			dialogVisible(val) {
				if (val) {
					this.$nextTick(() => {
						this.getDeduct();
					})
				}
			}
		}
	}
</script>

<style>
</style>